<template>
  <div class="lightbox__content">
    <div
      class="lightbox__content__cross i i-cross-modal"
      @click="handleClose"
    ></div>
    <div
      class="lightbox__content__prev i i-arrow-prev"
      @click="handleClose"
    ></div>
    <div class="lightbox__content__head">
      <div class="lightbox__content__head__image">
        <img :src="data?.imgSrc" :alt="data?.alt" />
      </div>
      <div class="lightbox__content__head__info">
        <h2 class="lightbox__content__head__info__title">{{ data?.title }}</h2>
        <h6 class="lightbox__content__head__info__subtitle">
          {{ data?.subTitle }}
        </h6>
        <div class="lightbox__content__head__info__label">
          {{ data?.label }}
        </div>
        <div class="lightbox__content__head__info__btn">
          <BtnList v-model="data.buttonList"></BtnList>
        </div>
      </div>
    </div>
    <div class="lightbox__content__main" style="--head-height: 297px">
      <div class="scroll-bar">
        <div
          data-simplebar-auto-hide="false"
          class="simple-bar"
          data-simplebar="init"
        >
          <div class="simplebar-wrapper" style="margin: 0px -24px 0px 0px">
            <div class="simplebar-height-auto-observer-wrapper">
              <div class="simplebar-height-auto-observer"></div>
            </div>
            <div class="simplebar-mask">
              <div class="simplebar-offset" style="right: 0px; bottom: 0px">
                <div
                  class="simplebar-content-wrapper"
                  tabindex="0"
                  role="region"
                  aria-label="scrollable content"
                  style="height: auto; overflow: hidden"
                >
                  <div
                    class="simplebar-content"
                    style="padding: 0px 24px 0px 0px"
                  >
                    <div class="lightbox__content__body">
                      <ul>
                        <li
                          class="lightbox__content__body__list"
                          v-for="item in data?.paragraphs"
                          :key="item.id"
                        >
                          <div class="lightbox__content__body__title">
                            {{ item.title }}
                          </div>
                          <div
                            class="lightbox__content__body__text"
                            v-html="item.content"
                          ></div>
                        </li>
                      </ul>
                    </div>
                    <div class="lightbox__content__footer">
                      <div class="lightbox__content__footer__logo">
                        <img
                          :src="
                            data.logo ||
                            'https://ywies-tx.cedim/images/logo/logo-ycyw.png'
                          "
                          alt="school logo"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="simplebar-placeholder"
              style="width: auto; height: 222px"
            ></div>
          </div>
          <div
            class="simplebar-track simplebar-horizontal"
            style="visibility: hidden"
          >
            <div
              class="simplebar-scrollbar simplebar-visible"
              style="width: 0px; display: none"
            ></div>
          </div>
          <div
            class="simplebar-track simplebar-vertical"
            style="visibility: hidden"
          >
            <div
              class="simplebar-scrollbar simplebar-visible"
              style="height: 0px; display: none"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import BtnList from "@/components/BtnList/index.vue";

defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const emit = defineEmits(["close"]);
const handleClose = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
.lightbox__content {
  position: relative;
  width: 100%;
  font-size: 0;
  padding: 0 15px 45px 39px;
  background: #fff;
}

@media (max-width: 767.98px) {
  .lightbox__content {
    padding: 0 17px 33px;
  }
}

.lightbox__content__cross {
  position: absolute;
  right: 33px;
  top: 24px;
  cursor: pointer;
}

@media (max-width: 767.98px) {
  .lightbox__content__cross {
    display: none;
  }
}

.lightbox__content__prev {
  position: absolute;
  left: 8px;
  top: 8px;
  cursor: pointer;
}

@media (min-width: 768px) {
  .lightbox__content__prev {
    display: none;
  }
}

.lightbox__content__head {
  display: flex;
  margin-bottom: 40px;
}

@media (max-width: 767.98px) {
  .lightbox__content__head {
    flex-direction: column;
    align-items: center;
  }
}

.lightbox__content__head__image {
  width: 200px;
  margin-right: 32px;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .lightbox__content__head__image {
    width: 160px;
    margin-right: 0;
    margin-bottom: 24px;
  }
}

.lightbox__content__head__image img {
  width: 100%;
  height: auto;
}

.lightbox__content__head__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .lightbox__content__head__info {
    align-items: center;
  }
}

.lightbox__content__head__info__title {
  color: #0032a0;
  margin-bottom: 12px;
}

.lightbox__content__head__info__subtitle {
  margin-bottom: 8px;
}

@media (max-width: 767.98px) and (max-width: 1023.98px) {
  .lightbox__content__head__info__subtitle {
    line-height: 1.25;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 767.98px) and (max-width: 767.98px) {
  .lightbox__content__head__info__subtitle {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: 0.02em;
  }
}

.lightbox__content__head__info__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.285;
  letter-spacing: 0.04em;
  color: #0048e8;
}

@media (max-width: 1023.98px) {
  .lightbox__content__head__info__label {
    line-height: 1.428;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__head__info__label {
    line-height: 1.285;
  }
}

.lightbox__content__head__info__btn {
  margin-top: 24px;
}

@media (max-width: 767.98px) {
  .lightbox__content__head__info__btn {
    margin-top: 20px;
  }
}

@media (min-width: 768px) {
  .lightbox__content__main {
    scrollbar-color: #0032a0 #e4e4e6;
    scrollbar-width: thin;
    margin-bottom: 39px;
  }

  .lightbox__content__main::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e4e4e6;
  }

  .lightbox__content__main::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #0032a0;
  }

  .lightbox__content__main::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #0032a0;
  }
}

@media (min-width: 768px) {
  .lightbox__content__main > .scroll-bar .simple-bar {
    padding-right: 24px;
    max-height: calc(100vh - 495px);
    max-height: calc(100vh - 220px - var(--head-height, 275px));
  }
}

.lightbox__content__body__list {
  margin-bottom: 40px;
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .lightbox__content__body__list {
    margin-bottom: 24px;
  }
}

.lightbox__content__body__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #0032a0;
  margin-bottom: 8px;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__title {
    line-height: 1.25;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__body__title {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: 0.02em;
  }
}

.lightbox__content__body__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #1a1c20;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.01em;
  }
}

.lightbox__content__body__text * {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #1a1c20;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text * {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.01em;
  }
}

.lightbox__content__body__text b,
.lightbox__content__body__text strong {
  font-weight: 500;
  color: #0032a0;
  color: var(--text-color--primary, #0032a0);
}

.lightbox__content__body__text h1,
.lightbox__content__body__text h1 * {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text h1,
  .lightbox__content__body__text h1 * {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text h1,
  .lightbox__content__body__text h1 * {
    font-size: 24px;
    line-height: 1.09;
  }
}

.lightbox__content__body__text h2,
.lightbox__content__body__text h2 * {
  font-size: 36px;
  line-height: 1.33;
  font-weight: 500;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text h2,
  .lightbox__content__body__text h2 * {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text h2,
  .lightbox__content__body__text h2 * {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
  }
}

.lightbox__content__body__text h3,
.lightbox__content__body__text h3 * {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.69;
  letter-spacing: 0.1em;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text h3,
  .lightbox__content__body__text h3 * {
    font-size: 24px;
    line-height: 1;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text h3,
  .lightbox__content__body__text h3 * {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.08em;
  }
}

.lightbox__content__body__text h4,
.lightbox__content__body__text h4 * {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text h4,
  .lightbox__content__body__text h4 * {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
}

.lightbox__content__body__text h5,
.lightbox__content__body__text h5 * {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text h5,
  .lightbox__content__body__text h5 * {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.125;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text h5,
  .lightbox__content__body__text h5 * {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.06em;
  }
}

.lightbox__content__body__text h6,
.lightbox__content__body__text h6 * {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text h6,
  .lightbox__content__body__text h6 * {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text h6,
  .lightbox__content__body__text h6 * {
    line-height: 1.5;
  }
}

.lightbox__content__body__text h1 b,
.lightbox__content__body__text h1 strong,
.lightbox__content__body__text h2 b,
.lightbox__content__body__text h2 strong,
.lightbox__content__body__text h3 b,
.lightbox__content__body__text h3 strong,
.lightbox__content__body__text h4 b,
.lightbox__content__body__text h4 strong,
.lightbox__content__body__text h5 b,
.lightbox__content__body__text h5 strong,
.lightbox__content__body__text h6 b,
.lightbox__content__body__text h6 strong {
  color: #0032a0;
  color: var(--text-color--primary, #0032a0);
}

.lightbox__content__body__text a {
  color: #0048e8;
  text-decoration: none;
  background-image: linear-gradient(90deg, #0048e8, #0048e8);
  background-size: 0 1px, 100% 1px;
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  padding-bottom: 2px;
}

.lightbox__content__body__text a:focus,
.lightbox__content__body__text a:hover {
  background-size: 100% 1px, 0 1px;
}

.lightbox__content__body__text ol:not(:last-child),
.lightbox__content__body__text ul:not(:last-child) {
  margin-bottom: 16px;
}

.lightbox__content__body__text ol:not(:first-child),
.lightbox__content__body__text ul:not(:first-child) {
  margin-top: 16px;
}

.lightbox__content__body__text ol > li,
.lightbox__content__body__text ul > li {
  position: relative;
  padding-left: 1.6em;
}

.lightbox__content__body__text ul > li:before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0.5em;
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
}

.lightbox__content__body__text ol {
  counter-reset: section;
  list-style-type: none;
}

.lightbox__content__body__text ol > li {
  list-style-type: none;
  position: relative;
}

.lightbox__content__body__text ol > li:before {
  counter-increment: section;
  content: counters(section, ".") ".";
  position: absolute;
  top: 0;
  left: 0;
  background: none;
}

.lightbox__content__body__text img {
  width: 100%;
}

.lightbox__content__body__text em {
  font-style: italic;
}

.lightbox__content__body__text table.scrollable {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-color: #0032a0 #e4e4e6;
  scrollbar-width: thin;
}

.lightbox__content__body__text table.scrollable::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #e4e4e6;
}

.lightbox__content__body__text table.scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: #0032a0;
}

.lightbox__content__body__text table.scrollable::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #0032a0;
}

@media (max-width: 575.98px) {
  .lightbox__content__body__text table.scrollable-sm {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-color: #0032a0 #e4e4e6;
    scrollbar-width: thin;
  }

  .lightbox__content__body__text table.scrollable-sm::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e4e4e6;
  }

  .lightbox__content__body__text table.scrollable-sm::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #0032a0;
  }

  .lightbox__content__body__text table.scrollable-sm::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #0032a0;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text table.scrollable-md {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-color: #0032a0 #e4e4e6;
    scrollbar-width: thin;
  }

  .lightbox__content__body__text table.scrollable-md::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e4e4e6;
  }

  .lightbox__content__body__text table.scrollable-md::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #0032a0;
  }

  .lightbox__content__body__text table.scrollable-md::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #0032a0;
  }
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text table.scrollable-lg {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-color: #0032a0 #e4e4e6;
    scrollbar-width: thin;
  }

  .lightbox__content__body__text table.scrollable-lg::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e4e4e6;
  }

  .lightbox__content__body__text table.scrollable-lg::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #0032a0;
  }

  .lightbox__content__body__text table.scrollable-lg::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #0032a0;
  }
}

@media (max-width: 1279.98px) {
  .lightbox__content__body__text table.scrollable-xl {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-color: #0032a0 #e4e4e6;
    scrollbar-width: thin;
  }

  .lightbox__content__body__text table.scrollable-xl::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e4e4e6;
  }

  .lightbox__content__body__text table.scrollable-xl::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #0032a0;
  }

  .lightbox__content__body__text table.scrollable-xl::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #0032a0;
  }
}

.lightbox__content__body__text table:not(.table-striped) tr {
  background-color: #fff;
}

.lightbox__content__body__text table:not(.table-striped) tr td {
  padding: 8px 32px 8px 16px;
  vertical-align: middle;
  line-height: 1.25;
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text table:not(.table-striped) tr td {
    padding: 10px 8px;
  }
}

.lightbox__content__body__text
  table:not(.table-striped)
  tr
  td:first-child:not(:only-child) {
  background-color: #f2f8ff;
}

.lightbox__content__body__text table:not(.table-striped) tr th {
  background-color: #0032a0;
  background-color: var(--text-color--secondary, #0032a0);
  color: #fff;
  padding: 8px 32px 8px 16px;
  vertical-align: middle;
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text table:not(.table-striped) tr th {
    height: 34px;
    padding: 8px 12px;
  }
}

.lightbox__content__body__text table:not(.table-striped) tr th *,
.lightbox__content__body__text table:not(.table-striped) tr th b,
.lightbox__content__body__text table:not(.table-striped) tr th em,
.lightbox__content__body__text table:not(.table-striped) tr th p,
.lightbox__content__body__text table:not(.table-striped) tr th strong {
  color: #fff;
}

.lightbox__content__body__text table:not(.table-striped) tr th p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text table:not(.table-striped) tr th p {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text table:not(.table-striped) tr th p {
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 767.98px) and (max-width: 1023.98px) {
  .lightbox__content__body__text table:not(.table-striped) tr th p {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: 0.01em;
  }
}

.lightbox__content__body__text table.table-striped tr:nth-child(2n) {
  background-color: #f2f8ff;
}

.lightbox__content__body__text table.table-striped tr:nth-child(odd) {
  background-color: #fff;
}

.lightbox__content__body__text table.table-striped tr:first-child {
  background-color: #0032a0;
  background-color: var(--text-color--secondary, #0032a0);
}

.lightbox__content__body__text table.table-striped th {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
  padding: 8px 36px;
  color: #fff;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text table.table-striped th {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: 0.01em;
    padding: 8px 16px;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text table.table-striped th {
    padding: 8px;
  }
}

.lightbox__content__body__text table.table-striped td {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  padding: 13.5px 36px;
  color: #1a1c20;
}

@media (max-width: 1023.98px) {
  .lightbox__content__body__text table.table-striped td {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.01em;
    padding: 12px 16px;
  }
}

@media (max-width: 767.98px) {
  .lightbox__content__body__text table.table-striped td {
    padding: 10px 8px;
  }
}

.lightbox__content__body__text .column-1 {
  -moz-column-count: 1;
  column-count: 1;
  grid-column-gap: 80px;
  -moz-column-gap: 80px;
  column-gap: 80px;
}

.lightbox__content__body__text .column-1 > * {
  -moz-column-break-inside: avoid;
  break-inside: avoid-column;
}

.lightbox__content__body__text .column-2 {
  -moz-column-count: 2;
  column-count: 2;
  grid-column-gap: 80px;
  -moz-column-gap: 80px;
  column-gap: 80px;
}

.lightbox__content__body__text .column-2 > * {
  -moz-column-break-inside: avoid;
  break-inside: avoid-column;
}

.lightbox__content__body__text .column-3 {
  -moz-column-count: 3;
  column-count: 3;
  grid-column-gap: 80px;
  -moz-column-gap: 80px;
  column-gap: 80px;
}

.lightbox__content__body__text .column-3 > * {
  -moz-column-break-inside: avoid;
  break-inside: avoid-column;
}

.lightbox__content__body__text .column-4 {
  -moz-column-count: 4;
  column-count: 4;
  grid-column-gap: 80px;
  -moz-column-gap: 80px;
  column-gap: 80px;
}

.lightbox__content__body__text .column-4 > * {
  -moz-column-break-inside: avoid;
  break-inside: avoid-column;
}

@media (min-width: 768px) {
  .lightbox__content__body__text .column-tablet-1 {
    -moz-column-count: 1;
    column-count: 1;
    grid-column-gap: 80px;
    -moz-column-gap: 80px;
    column-gap: 80px;
  }

  .lightbox__content__body__text .column-tablet-1 > * {
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

@media (min-width: 768px) {
  .lightbox__content__body__text .column-tablet-2 {
    -moz-column-count: 2;
    column-count: 2;
    grid-column-gap: 80px;
    -moz-column-gap: 80px;
    column-gap: 80px;
  }

  .lightbox__content__body__text .column-tablet-2 > * {
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

@media (min-width: 768px) {
  .lightbox__content__body__text .column-tablet-3 {
    -moz-column-count: 3;
    column-count: 3;
    grid-column-gap: 80px;
    -moz-column-gap: 80px;
    column-gap: 80px;
  }

  .lightbox__content__body__text .column-tablet-3 > * {
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

@media (min-width: 768px) {
  .lightbox__content__body__text .column-tablet-4 {
    -moz-column-count: 4;
    column-count: 4;
    grid-column-gap: 80px;
    -moz-column-gap: 80px;
    column-gap: 80px;
  }

  .lightbox__content__body__text .column-tablet-4 > * {
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

@media (min-width: 1280px) {
  .lightbox__content__body__text .column-desktop-1 {
    -moz-column-count: 1;
    column-count: 1;
    grid-column-gap: 80px;
    -moz-column-gap: 80px;
    column-gap: 80px;
  }

  .lightbox__content__body__text .column-desktop-1 > * {
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

@media (min-width: 1280px) {
  .lightbox__content__body__text .column-desktop-2 {
    -moz-column-count: 2;
    column-count: 2;
    grid-column-gap: 80px;
    -moz-column-gap: 80px;
    column-gap: 80px;
  }

  .lightbox__content__body__text .column-desktop-2 > * {
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

@media (min-width: 1280px) {
  .lightbox__content__body__text .column-desktop-3 {
    -moz-column-count: 3;
    column-count: 3;
    grid-column-gap: 80px;
    -moz-column-gap: 80px;
    column-gap: 80px;
  }

  .lightbox__content__body__text .column-desktop-3 > * {
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

@media (min-width: 1280px) {
  .lightbox__content__body__text .column-desktop-4 {
    -moz-column-count: 4;
    column-count: 4;
    grid-column-gap: 80px;
    -moz-column-gap: 80px;
    column-gap: 80px;
  }

  .lightbox__content__body__text .column-desktop-4 > * {
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

.lightbox__content__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 80px;
}

@media (max-width: 767.98px) {
  .lightbox__content__footer {
    justify-content: center;
    margin-top: 60px;
  }
}

.lightbox__content__footer__logo {
  height: 90px;
}

@media (max-width: 767.98px) {
  .lightbox__content__footer__logo {
    height: 55px;
  }
}

.lightbox__content__footer__logo img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.lightbox-profile .lightbox__wrapper .lightbox__content__head__info__btn {
  margin-top: 24px;
}

@media (max-width: 767.98px) {
  .lightbox-profile .lightbox__wrapper .lightbox__content__head__info__btn {
    margin-top: 20px;
  }
}

:deep(.container-content) {
  padding: 0 !important;
  margin: 0 !important;
}

:deep(.btn-list__row) {
  justify-content: flex-start !important;
}
</style>
